<template>
  <div>
    <div class="g-flex g-m-t-10" v-for="item in 20" :key="item" @click="changeRouter('detail-up', item)">
      <img class="list-img" :src="values.poster" alt="">
      <div class="g-m-l-10">
        <div>标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题...</div>
        <div>UP主昵称</div>
        <span>4.9万 10小时前</span>
        <span class="g-f-r" @click="fnFeedback">:</span>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'Recommend',
  props: {
    values: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  setup(props,{emit}) {
    const router = useRouter()
    const changeRouter = (path, query) => router.push(path, {
      from: query
    })
    function fnFeedback(){
      emit("feedback")
    }
    return {
      changeRouter,
      fnFeedback
    }
  }
}
</script>

<style lang="scss" scoped>
.g-flex {
  display: flex;
}
.g-jc-sb {
  justify-content: space-between;
}
.g-jc-sa {
  justify-content: space-around;
}
.g-m-l-10 {
  margin-left: 10px;
}
.g-m-r-10 {
  margin-right: 10px;
}
.g-m-r-20 {
  margin-right: 20px;
}
.g-m-t-10 {
  margin-top: 10px;
}
.g-m-l-a {
  margin-left: auto;
}
.g-f-r {
  float: right;
}
.g-w {
  width: 100%;
}
.g-o-x-s {
  overflow-x: scroll;
}
.g-s-h::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.g-relative {
  position: relative;
}
.g-absolute {
  position: absolute;
  top: 60px;
}
.up-advert-img {
  width: 54px;
  height: 34px;
  border-radius: 2px;
}
.up-head-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.up-name {
  height: 20px;
  font-size: 14px;
}
.up-btn {
  height: 28px;
}
.up-crad-img {
  width: 140px;
  height: 80px;
  border-radius: 2px;
}
.bug-video {
  width: 96%;
  height: 30px;
  line-height: 30px;
  border: 1px solid red;
  border-radius: 15px;
  vertical-align: middle;
  background: palevioletred;
}
.list-img {
  width: 150px;
  height: 60px;
  border-radius: 4px;
}
</style>